// main.qml
// QCheckBox 适配到 Qt for HarmonyOS
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15

ApplicationWindow {
    id: root
    width: Screen.width > 0 ? Screen.width : 1260
    height: Screen.height > 0 ? Screen.height : 2720
    visible: true
    title: "QCheckBox 样式表示例"
    
    // 背景色
    color: "#F5F5F5"
    
    // 点击反馈提示
    Rectangle {
        id: feedbackRect
        width: root.width - 60
        height: 70
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 50
        color: "#E3F2FD"
        border.color: "#2196F3"
        border.width: 3
        radius: 10
        visible: false
        z: 1000
        
        Text {
            anchors.centerIn: parent
            text: "复选框状态已改变！"
            font.pixelSize: 28
            font.bold: true
            color: "#1976D2"
        }
        
        SequentialAnimation on opacity {
            id: feedbackAnimation
            running: false
            NumberAnimation { from: 0; to: 1; duration: 200 }
            PauseAnimation { duration: 1500 }
            NumberAnimation { from: 1; to: 0; duration: 200 }
            onFinished: feedbackRect.visible = false
        }
    }
    
    // 显示反馈的函数
    function showFeedback(checkboxText, checked) {
        feedbackRect.visible = true
        feedbackRect.opacity = 0
        feedbackAnimation.start()
        console.log("复选框状态改变:", checkboxText, "选中:", checked)
    }
    
    Flickable {
        id: flickable
        anchors.fill: parent
        contentWidth: width
        contentHeight: mainColumn.height + 100
        clip: true
        
        ScrollBar.vertical: ScrollBar {
            policy: ScrollBar.AlwaysOn
        }
        
        Column {
            id: mainColumn
            width: flickable.width
            spacing: 30
            topPadding: 30
            leftPadding: 30
            rightPadding: 30
            bottomPadding: 100
            
            // 标题
            Text {
                id: titleLabel
                text: "QCheckBox 样式表示例"
                width: parent.width
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 52
                font.bold: true
                color: "#333333"
                padding: 20
            }
            
            // 1. 基本样式示例
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 60
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.verticalCenter: parent.verticalCenter
                        text: "基本样式"
                        font.pixelSize: 30
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    CheckBox {
                        id: defaultCheckbox
                        text: "默认复选框"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: defaultCheckbox.text ? (defaultCheckbox.mirrored ? defaultCheckbox.width - width - defaultCheckbox.rightPadding : defaultCheckbox.leftPadding) : defaultCheckbox.leftPadding + (defaultCheckbox.availableWidth - width) / 2
                            y: defaultCheckbox.topPadding + (defaultCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: "#CCCCCC"
                            border.width: 2
                            color: defaultCheckbox.checked ? "#2196F3" : "white"
                            
                            Text {
                                anchors.centerIn: parent
                                text: "✓"
                                color: "white"
                                font.pixelSize: 28
                                font.bold: true
                                visible: defaultCheckbox.checked
                            }
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(defaultCheckbox.text, checked)
                    }
                    
                    CheckBox {
                        id: basicCheckbox
                        text: "基本样式"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: basicCheckbox.text ? (basicCheckbox.mirrored ? basicCheckbox.width - width - basicCheckbox.rightPadding : basicCheckbox.leftPadding) : basicCheckbox.leftPadding + (basicCheckbox.availableWidth - width) / 2
                            y: basicCheckbox.topPadding + (basicCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: "#CCCCCC"
                            border.width: 4
                            color: basicCheckbox.checked ? "#2196F3" : "white"
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(basicCheckbox.text, checked)
                    }
                }
            }
            
            // 2. 状态样式示例（正常、选中、悬停）
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 60
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.verticalCenter: parent.verticalCenter
                        text: "状态样式"
                        font.pixelSize: 30
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    CheckBox {
                        id: stateCheckbox
                        text: "状态样式"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: stateCheckbox.text ? (stateCheckbox.mirrored ? stateCheckbox.width - width - stateCheckbox.rightPadding : stateCheckbox.leftPadding) : stateCheckbox.leftPadding + (stateCheckbox.availableWidth - width) / 2
                            y: stateCheckbox.topPadding + (stateCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: stateCheckbox.down ? "#999999" : "#CCCCCC"
                            border.width: 4
                            color: stateCheckbox.checked ? (stateCheckbox.down ? "#66BB6A" : "#4CAF50") : "white"
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                            Behavior on border.color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(stateCheckbox.text, checked)
                    }
                    
                    CheckBox {
                        id: disabledCheckbox
                        text: "禁用状态"
                        enabled: false
                        checked: true
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: disabledCheckbox.text ? (disabledCheckbox.mirrored ? disabledCheckbox.width - width - disabledCheckbox.rightPadding : disabledCheckbox.leftPadding) : disabledCheckbox.leftPadding + (disabledCheckbox.availableWidth - width) / 2
                            y: disabledCheckbox.topPadding + (disabledCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: "#E0E0E0"
                            border.width: 4
                            color: disabledCheckbox.checked ? "#E8F5E9" : "#F5F5F5"
                            opacity: 0.6
                        }
                    }
                }
            }
            
            // 3. 自定义指示器样式示例
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 60
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.verticalCenter: parent.verticalCenter
                        text: "自定义指示器样式"
                        font.pixelSize: 30
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    CheckBox {
                        id: circleCheckbox
                        text: "圆形指示器"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 44
                            implicitHeight: 44
                            x: circleCheckbox.text ? (circleCheckbox.mirrored ? circleCheckbox.width - width - circleCheckbox.rightPadding : circleCheckbox.leftPadding) : circleCheckbox.leftPadding + (circleCheckbox.availableWidth - width) / 2
                            y: circleCheckbox.topPadding + (circleCheckbox.availableHeight - height) / 2
                            radius: 22
                            border.color: "#F44336"
                            border.width: 4
                            color: circleCheckbox.checked ? "#F44336" : "white"
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(circleCheckbox.text, checked)
                    }
                    
                    CheckBox {
                        id: checkmarkCheckbox
                        text: "自定义勾选标记"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: checkmarkCheckbox.text ? (checkmarkCheckbox.mirrored ? checkmarkCheckbox.width - width - checkmarkCheckbox.rightPadding : checkmarkCheckbox.leftPadding) : checkmarkCheckbox.leftPadding + (checkmarkCheckbox.availableWidth - width) / 2
                            y: checkmarkCheckbox.topPadding + (checkmarkCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: "#2196F3"
                            border.width: 4
                            color: checkmarkCheckbox.checked ? "#2196F3" : "white"
                            
                            Text {
                                anchors.centerIn: parent
                                text: "✓"
                                color: "white"
                                font.pixelSize: 28
                                font.bold: true
                                visible: checkmarkCheckbox.checked
                            }
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(checkmarkCheckbox.text, checked)
                    }
                }
            }
            
            // 4. 渐变背景样式示例
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 60
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.verticalCenter: parent.verticalCenter
                        text: "渐变背景样式"
                        font.pixelSize: 30
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    CheckBox {
                        id: gradientCheckbox
                        text: "渐变背景"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: gradientCheckbox.text ? (gradientCheckbox.mirrored ? gradientCheckbox.width - width - gradientCheckbox.rightPadding : gradientCheckbox.leftPadding) : gradientCheckbox.leftPadding + (gradientCheckbox.availableWidth - width) / 2
                            y: gradientCheckbox.topPadding + (gradientCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: "#9C27B0"
                            border.width: 4
                            gradient: gradientCheckbox.checked ? gradientObj : null
                            color: gradientCheckbox.checked ? "#9C27B0" : "white"
                            
                            Gradient {
                                id: gradientObj
                                GradientStop { position: 0.0; color: "#9C27B0" }
                                GradientStop { position: 1.0; color: "#673AB7" }
                            }
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(gradientCheckbox.text, checked)
                    }
                    
                    CheckBox {
                        id: glowCheckbox
                        text: "发光效果"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: glowCheckbox.text ? (glowCheckbox.mirrored ? glowCheckbox.width - width - glowCheckbox.rightPadding : glowCheckbox.leftPadding) : glowCheckbox.leftPadding + (glowCheckbox.availableWidth - width) / 2
                            y: glowCheckbox.topPadding + (glowCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: "#FF9800"
                            border.width: 4
                            color: glowCheckbox.checked ? "#FF9800" : "white"
                            
                            Rectangle {
                                anchors.fill: parent
                                radius: parent.radius
                                color: "transparent"
                                border.color: glowCheckbox.checked ? "#FF9800" : "transparent"
                                border.width: 2
                                opacity: glowCheckbox.checked ? 0.5 : 0
                                
                                Behavior on opacity {
                                    NumberAnimation { duration: 200 }
                                }
                            }
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(glowCheckbox.text, checked)
                    }
                }
            }
            
            // 5. 扁平风格样式示例
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 60
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.verticalCenter: parent.verticalCenter
                        text: "扁平风格样式"
                        font.pixelSize: 30
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    CheckBox {
                        id: flatCheckbox
                        text: "扁平风格"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 36
                            implicitHeight: 36
                            x: flatCheckbox.text ? (flatCheckbox.mirrored ? flatCheckbox.width - width - flatCheckbox.rightPadding : flatCheckbox.leftPadding) : flatCheckbox.leftPadding + (flatCheckbox.availableWidth - width) / 2
                            y: flatCheckbox.topPadding + (flatCheckbox.availableHeight - height) / 2
                            radius: 4
                            border.color: "#607D8B"
                            border.width: 4
                            color: flatCheckbox.checked ? "#607D8B" : "white"
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(flatCheckbox.text, checked)
                    }
                    
                    CheckBox {
                        id: minimalCheckbox
                        text: "极简风格"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 32
                            implicitHeight: 32
                            x: minimalCheckbox.text ? (minimalCheckbox.mirrored ? minimalCheckbox.width - width - minimalCheckbox.rightPadding : minimalCheckbox.leftPadding) : minimalCheckbox.leftPadding + (minimalCheckbox.availableWidth - width) / 2
                            y: minimalCheckbox.topPadding + (minimalCheckbox.availableHeight - height) / 2
                            radius: 0
                            border.color: "#757575"
                            border.width: 2
                            color: minimalCheckbox.checked ? "#212121" : "white"
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(minimalCheckbox.text, checked)
                    }
                }
            }
            
            // 6. 单选按钮风格的复选框
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 60
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.verticalCenter: parent.verticalCenter
                        text: "单选按钮风格"
                        font.pixelSize: 30
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    CheckBox {
                        id: radioStyleCheckbox
                        text: "单选按钮风格"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: radioStyleCheckbox.text ? (radioStyleCheckbox.mirrored ? radioStyleCheckbox.width - width - radioStyleCheckbox.rightPadding : radioStyleCheckbox.leftPadding) : radioStyleCheckbox.leftPadding + (radioStyleCheckbox.availableWidth - width) / 2
                            y: radioStyleCheckbox.topPadding + (radioStyleCheckbox.availableHeight - height) / 2
                            radius: 20
                            border.color: "#00BCD4"
                            border.width: 4
                            color: radioStyleCheckbox.checked ? "#00BCD4" : "white"
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(radioStyleCheckbox.text, checked)
                    }
                    
                    CheckBox {
                        id: dotRadioCheckbox
                        text: "带圆点的单选风格"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: dotRadioCheckbox.text ? (dotRadioCheckbox.mirrored ? dotRadioCheckbox.width - width - dotRadioCheckbox.rightPadding : dotRadioCheckbox.leftPadding) : dotRadioCheckbox.leftPadding + (dotRadioCheckbox.availableWidth - width) / 2
                            y: dotRadioCheckbox.topPadding + (dotRadioCheckbox.availableHeight - height) / 2
                            radius: 20
                            border.color: "#4CAF50"
                            border.width: 4
                            color: "white"
                            
                            Rectangle {
                                anchors.centerIn: parent
                                width: dotRadioCheckbox.checked ? 20 : 0
                                height: dotRadioCheckbox.checked ? 20 : 0
                                radius: 10
                                color: "#4CAF50"
                                
                                Behavior on width {
                                    NumberAnimation { duration: 200 }
                                }
                                Behavior on height {
                                    NumberAnimation { duration: 200 }
                                }
                            }
                            
                            Behavior on border.color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(dotRadioCheckbox.text, checked)
                    }
                }
            }
            
            // 7. 大小和间距样式示例
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 60
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.verticalCenter: parent.verticalCenter
                        text: "大小和间距样式"
                        font.pixelSize: 30
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    CheckBox {
                        id: smallCheckbox
                        text: "小号复选框"
                        font.pixelSize: 24
                        indicator: Rectangle {
                            implicitWidth: 28
                            implicitHeight: 28
                            x: smallCheckbox.text ? (smallCheckbox.mirrored ? smallCheckbox.width - width - smallCheckbox.rightPadding : smallCheckbox.leftPadding) : smallCheckbox.leftPadding + (smallCheckbox.availableWidth - width) / 2
                            y: smallCheckbox.topPadding + (smallCheckbox.availableHeight - height) / 2
                            radius: 4
                            border.color: "#CCCCCC"
                            border.width: 2
                            color: smallCheckbox.checked ? "#9E9E9E" : "white"
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(smallCheckbox.text, checked)
                    }
                    
                    CheckBox {
                        id: largeCheckbox
                        text: "大号复选框"
                        font.pixelSize: 36
                        indicator: Rectangle {
                            implicitWidth: 48
                            implicitHeight: 48
                            x: largeCheckbox.text ? (largeCheckbox.mirrored ? largeCheckbox.width - width - largeCheckbox.rightPadding : largeCheckbox.leftPadding) : largeCheckbox.leftPadding + (largeCheckbox.availableWidth - width) / 2
                            y: largeCheckbox.topPadding + (largeCheckbox.availableHeight - height) / 2
                            radius: 8
                            border.color: "#FF5722"
                            border.width: 4
                            color: largeCheckbox.checked ? "#FF5722" : "white"
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(largeCheckbox.text, checked)
                    }
                }
            }
            
            // 8. 3D立体效果样式
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 60
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.verticalCenter: parent.verticalCenter
                        text: "3D立体效果样式"
                        font.pixelSize: 30
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    CheckBox {
                        id: shadow3dCheckbox
                        text: "3D阴影效果"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: shadow3dCheckbox.text ? (shadow3dCheckbox.mirrored ? shadow3dCheckbox.width - width - shadow3dCheckbox.rightPadding : shadow3dCheckbox.leftPadding) : shadow3dCheckbox.leftPadding + (shadow3dCheckbox.availableWidth - width) / 2
                            y: shadow3dCheckbox.topPadding + (shadow3dCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: shadow3dCheckbox.checked ? "#4CAF50" : "#CCCCCC"
                            border.width: 3
                            color: shadow3dCheckbox.checked ? "#4CAF50" : "white"
                            
                            Rectangle {
                                anchors.fill: parent
                                anchors.margins: -3
                                radius: parent.radius + 2
                                color: shadow3dCheckbox.checked ? "#2E7D32" : "#E0E0E0"
                                z: -1
                                opacity: 0.5
                            }
                            
                            Text {
                                anchors.centerIn: parent
                                text: "✓"
                                color: "white"
                                font.pixelSize: 28
                                font.bold: true
                                visible: shadow3dCheckbox.checked
                            }
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                            Behavior on border.color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(shadow3dCheckbox.text, checked)
                    }
                    
                    CheckBox {
                        id: raised3dCheckbox
                        text: "3D凸起效果"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: raised3dCheckbox.text ? (raised3dCheckbox.mirrored ? raised3dCheckbox.width - width - raised3dCheckbox.rightPadding : raised3dCheckbox.leftPadding) : raised3dCheckbox.leftPadding + (raised3dCheckbox.availableWidth - width) / 2
                            y: raised3dCheckbox.topPadding + (raised3dCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: "#9C27B0"
                            border.width: 2
                            color: raised3dCheckbox.checked ? "#9C27B0" : "#F5F5F5"
                            
                            Rectangle {
                                anchors.top: parent.top
                                anchors.left: parent.left
                                anchors.right: parent.right
                                height: parent.height / 2
                                radius: parent.radius
                                color: raised3dCheckbox.checked ? "#BA68C8" : "#FFFFFF"
                                opacity: 0.3
                            }
                            
                            Text {
                                anchors.centerIn: parent
                                text: "✓"
                                color: "white"
                                font.pixelSize: 28
                                font.bold: true
                                visible: raised3dCheckbox.checked
                            }
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(raised3dCheckbox.text, checked)
                    }
                }
            }
            
            // 9. 主题色彩样式
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 60
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.verticalCenter: parent.verticalCenter
                        text: "主题色彩样式"
                        font.pixelSize: 30
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 20
                    
                    CheckBox {
                        id: redThemeCheckbox
                        text: "红色主题"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: redThemeCheckbox.text ? (redThemeCheckbox.mirrored ? redThemeCheckbox.width - width - redThemeCheckbox.rightPadding : redThemeCheckbox.leftPadding) : redThemeCheckbox.leftPadding + (redThemeCheckbox.availableWidth - width) / 2
                            y: redThemeCheckbox.topPadding + (redThemeCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: "#F44336"
                            border.width: 4
                            color: redThemeCheckbox.checked ? "#F44336" : "white"
                            
                            Text {
                                anchors.centerIn: parent
                                text: "✓"
                                color: "white"
                                font.pixelSize: 28
                                font.bold: true
                                visible: redThemeCheckbox.checked
                            }
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(redThemeCheckbox.text, checked)
                    }
                    
                    CheckBox {
                        id: orangeThemeCheckbox
                        text: "橙色主题"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: orangeThemeCheckbox.text ? (orangeThemeCheckbox.mirrored ? orangeThemeCheckbox.width - width - orangeThemeCheckbox.rightPadding : orangeThemeCheckbox.leftPadding) : orangeThemeCheckbox.leftPadding + (orangeThemeCheckbox.availableWidth - width) / 2
                            y: orangeThemeCheckbox.topPadding + (orangeThemeCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: "#FF9800"
                            border.width: 4
                            color: orangeThemeCheckbox.checked ? "#FF9800" : "white"
                            
                            Text {
                                anchors.centerIn: parent
                                text: "✓"
                                color: "white"
                                font.pixelSize: 28
                                font.bold: true
                                visible: orangeThemeCheckbox.checked
                            }
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(orangeThemeCheckbox.text, checked)
                    }
                    
                    CheckBox {
                        id: tealThemeCheckbox
                        text: "青色主题"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: tealThemeCheckbox.text ? (tealThemeCheckbox.mirrored ? tealThemeCheckbox.width - width - tealThemeCheckbox.rightPadding : tealThemeCheckbox.leftPadding) : tealThemeCheckbox.leftPadding + (tealThemeCheckbox.availableWidth - width) / 2
                            y: tealThemeCheckbox.topPadding + (tealThemeCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: "#009688"
                            border.width: 4
                            color: tealThemeCheckbox.checked ? "#009688" : "white"
                            
                            Text {
                                anchors.centerIn: parent
                                text: "✓"
                                color: "white"
                                font.pixelSize: 28
                                font.bold: true
                                visible: tealThemeCheckbox.checked
                            }
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(tealThemeCheckbox.text, checked)
                    }
                }
            }
            
            // 10. 开关式复选框样式
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 60
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.verticalCenter: parent.verticalCenter
                        text: "开关式复选框样式"
                        font.pixelSize: 30
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    CheckBox {
                        id: switchStyleCheckbox
                        text: "开关样式"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 60
                            implicitHeight: 32
                            x: switchStyleCheckbox.text ? (switchStyleCheckbox.mirrored ? switchStyleCheckbox.width - width - switchStyleCheckbox.rightPadding : switchStyleCheckbox.leftPadding) : switchStyleCheckbox.leftPadding + (switchStyleCheckbox.availableWidth - width) / 2
                            y: switchStyleCheckbox.topPadding + (switchStyleCheckbox.availableHeight - height) / 2
                            radius: 16
                            color: switchStyleCheckbox.checked ? "#4CAF50" : "#CCCCCC"
                            border.width: 0
                            
                            Rectangle {
                                id: switchThumb
                                width: 28
                                height: 28
                                radius: 14
                                color: "white"
                                anchors.verticalCenter: parent.verticalCenter
                                anchors.left: parent.left
                                anchors.leftMargin: switchStyleCheckbox.checked ? 30 : 2
                                
                                Behavior on anchors.leftMargin {
                                    NumberAnimation { duration: 200 }
                                }
                            }
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(switchStyleCheckbox.text, checked)
                    }
                    
                    CheckBox {
                        id: toggleStyleCheckbox
                        text: "切换样式"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 56
                            implicitHeight: 30
                            x: toggleStyleCheckbox.text ? (toggleStyleCheckbox.mirrored ? toggleStyleCheckbox.width - width - toggleStyleCheckbox.rightPadding : toggleStyleCheckbox.leftPadding) : toggleStyleCheckbox.leftPadding + (toggleStyleCheckbox.availableWidth - width) / 2
                            y: toggleStyleCheckbox.topPadding + (toggleStyleCheckbox.availableHeight - height) / 2
                            radius: 15
                            color: toggleStyleCheckbox.checked ? "#2196F3" : "#E0E0E0"
                            border.width: 0
                            
                            Rectangle {
                                width: 26
                                height: 26
                                radius: 13
                                color: "white"
                                anchors.verticalCenter: parent.verticalCenter
                                anchors.left: parent.left
                                anchors.leftMargin: toggleStyleCheckbox.checked ? 28 : 2
                                
                                Behavior on anchors.leftMargin {
                                    NumberAnimation { duration: 200; easing.type: Easing.OutCubic }
                                }
                            }
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(toggleStyleCheckbox.text, checked)
                    }
                }
            }
            
            // 11. 动画效果样式
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 60
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.verticalCenter: parent.verticalCenter
                        text: "动画效果样式"
                        font.pixelSize: 30
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    CheckBox {
                        id: scaleCheckbox
                        text: "缩放动画"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: scaleCheckbox.text ? (scaleCheckbox.mirrored ? scaleCheckbox.width - width - scaleCheckbox.rightPadding : scaleCheckbox.leftPadding) : scaleCheckbox.leftPadding + (scaleCheckbox.availableWidth - width) / 2
                            y: scaleCheckbox.topPadding + (scaleCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: "#E91E63"
                            border.width: 4
                            color: scaleCheckbox.checked ? "#E91E63" : "white"
                            
                            scale: scaleCheckbox.checked ? 1.1 : 1.0
                            
                            Text {
                                anchors.centerIn: parent
                                text: "✓"
                                color: "white"
                                font.pixelSize: 28
                                font.bold: true
                                visible: scaleCheckbox.checked
                                scale: scaleCheckbox.checked ? 1.2 : 0.8
                            }
                            
                            Behavior on scale {
                                NumberAnimation { duration: 200; easing.type: Easing.OutBack }
                            }
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(scaleCheckbox.text, checked)
                    }
                    
                    CheckBox {
                        id: rotateCheckbox
                        text: "旋转动画"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: rotateCheckbox.text ? (rotateCheckbox.mirrored ? rotateCheckbox.width - width - rotateCheckbox.rightPadding : rotateCheckbox.leftPadding) : rotateCheckbox.leftPadding + (rotateCheckbox.availableWidth - width) / 2
                            y: rotateCheckbox.topPadding + (rotateCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: "#9C27B0"
                            border.width: 4
                            color: rotateCheckbox.checked ? "#9C27B0" : "white"
                            
                            rotation: rotateCheckbox.checked ? 360 : 0
                            
                            Text {
                                anchors.centerIn: parent
                                text: "✓"
                                color: "white"
                                font.pixelSize: 28
                                font.bold: true
                                visible: rotateCheckbox.checked
                            }
                            
                            Behavior on rotation {
                                NumberAnimation { duration: 400; easing.type: Easing.OutCubic }
                            }
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(rotateCheckbox.text, checked)
                    }
                }
            }
            
            // 12. 边框样式变化
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 60
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.verticalCenter: parent.verticalCenter
                        text: "边框样式变化"
                        font.pixelSize: 30
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 20
                    
                    CheckBox {
                        id: thickBorderCheckbox
                        text: "粗边框"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: thickBorderCheckbox.text ? (thickBorderCheckbox.mirrored ? thickBorderCheckbox.width - width - thickBorderCheckbox.rightPadding : thickBorderCheckbox.leftPadding) : thickBorderCheckbox.leftPadding + (thickBorderCheckbox.availableWidth - width) / 2
                            y: thickBorderCheckbox.topPadding + (thickBorderCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: thickBorderCheckbox.checked ? "#FF5722" : "#CCCCCC"
                            border.width: thickBorderCheckbox.checked ? 6 : 3
                            color: thickBorderCheckbox.checked ? "#FF5722" : "white"
                            
                            Text {
                                anchors.centerIn: parent
                                text: "✓"
                                color: "white"
                                font.pixelSize: 28
                                font.bold: true
                                visible: thickBorderCheckbox.checked
                            }
                            
                            Behavior on border.width {
                                NumberAnimation { duration: 200 }
                            }
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(thickBorderCheckbox.text, checked)
                    }
                    
                    CheckBox {
                        id: doubleBorderCheckbox
                        text: "双边框"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: doubleBorderCheckbox.text ? (doubleBorderCheckbox.mirrored ? doubleBorderCheckbox.width - width - doubleBorderCheckbox.rightPadding : doubleBorderCheckbox.leftPadding) : doubleBorderCheckbox.leftPadding + (doubleBorderCheckbox.availableWidth - width) / 2
                            y: doubleBorderCheckbox.topPadding + (doubleBorderCheckbox.availableHeight - height) / 2
                            radius: 6
                            border.color: doubleBorderCheckbox.checked ? "#00BCD4" : "#CCCCCC"
                            border.width: 2
                            color: doubleBorderCheckbox.checked ? "#00BCD4" : "white"
                            
                            Rectangle {
                                anchors.fill: parent
                                anchors.margins: 3
                                radius: parent.radius - 1
                                border.color: doubleBorderCheckbox.checked ? "#00838F" : "#E0E0E0"
                                border.width: 2
                                color: "transparent"
                            }
                            
                            Text {
                                anchors.centerIn: parent
                                text: "✓"
                                color: "white"
                                font.pixelSize: 28
                                font.bold: true
                                visible: doubleBorderCheckbox.checked
                            }
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(doubleBorderCheckbox.text, checked)
                    }
                    
                    CheckBox {
                        id: roundedBorderCheckbox
                        text: "大圆角"
                        font.pixelSize: 28
                        indicator: Rectangle {
                            implicitWidth: 40
                            implicitHeight: 40
                            x: roundedBorderCheckbox.text ? (roundedBorderCheckbox.mirrored ? roundedBorderCheckbox.width - width - roundedBorderCheckbox.rightPadding : roundedBorderCheckbox.leftPadding) : roundedBorderCheckbox.leftPadding + (roundedBorderCheckbox.availableWidth - width) / 2
                            y: roundedBorderCheckbox.topPadding + (roundedBorderCheckbox.availableHeight - height) / 2
                            radius: 12
                            border.color: "#FF9800"
                            border.width: 4
                            color: roundedBorderCheckbox.checked ? "#FF9800" : "white"
                            
                            Text {
                                anchors.centerIn: parent
                                text: "✓"
                                color: "white"
                                font.pixelSize: 28
                                font.bold: true
                                visible: roundedBorderCheckbox.checked
                            }
                            
                            Behavior on color {
                                ColorAnimation { duration: 200 }
                            }
                        }
                        onCheckedChanged: showFeedback(roundedBorderCheckbox.text, checked)
                    }
                }
            }
        }
    }
}
